<template>
    <el-dialog v-model="visible" :title="`上传至${params.name}业务`" width="35%" :footer="false" :before-close="close"
              :close-on-click-modal="false" destroy-on-close draggable overflow>
        <el-scrollbar height="350px">
            <el-upload ref="asnUploadRef" v-model:file-list="fileList" :action="action" :headers="headers" :data="params"
                       :auto-upload="false"
                       :on-success="onSuccessHandle"
                       list-type="picture-card"
                       accept=".asn"
                       multiple>
                <el-icon>
                    <svg-icon name="el-icon-plus"/>
                </el-icon>
                <template #file="{ file }">
                    <div>
                        <el-image :src="defaultImage" fit="fill"/>
                        <label class="el-upload-list__item-status-label">
                            <i class="el-icon  el-icon--check">
                                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"/>
                                </svg>
                            </i>
                        </label>
                        <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-delete" @click="onRemoveHandle(file)">
                                    <el-icon>
                                        <svg-icon name="el-icon-delete"/>
                                    </el-icon>
                                </span>
                            </span>
                    </div>
                </template>
            </el-upload>
        </el-scrollbar>
        <template #footer>
            <el-button type="primary" @click="submit">上传</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive} from "vue";
import store from "@/store";
import {env} from '@/utils';
import {ElMessage} from "element-plus";

const {user, token} = store.userStore;
const {API_URL} = env;

const visible = ref(false);
const defaultImage = new URL(`@/assets/images/asn.png`, import.meta.url).href;

const asnUploadRef = ref();
const action = `${API_URL}/asn1/upload/config`;
const headers = reactive({
    'Authentication': token
});

const fileList = ref([]);
const params = ref<{owner: string; name: string}>({
    owner: '',
    name: ''
});
let done: () => void;

const submit = () => {
    asnUploadRef.value.submit();
}

const onRemoveHandle = (file: any) => {
    asnUploadRef.value.handleRemove(file);
}

const onSuccessHandle = ({code, message}:{code: number, message: string}, file: any) => {
    if (code !== 200){
        file.status = 'error';
        ElMessage.error(file.name + message);
    } else {
        file.status = 'success';
        done();
        ElMessage.success(`${file.name}上传成功`);
    }
}

// 展示弹窗
const open = (val: string, resolve: ()=> void) => {
    done = resolve;
    params.value.name = val;
    params.value.owner = String(user?.userId);
    visible.value = true;
};

// 关闭弹窗
const close = () => {
    asnUploadRef.value.abort();
    fileList.value.slice(0)
    fileList.value.length = 0;
    visible.value = false;
};

defineExpose({open})
</script>

<style lang="scss" scoped>
.asn-upload-dialog .el-dialog__body{
    padding: 15px;
}
</style>